<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>鉴定工具管理</title>
  <!-- <style></style> -->
  <link rel="stylesheet" href="./css/page.css" />
  <link rel="stylesheet" href="./css/zm_led.css">
  <script src="./js/page.js"></script>
  <!-- 鼠标样式更改 -->
  <!-- <link rel="stylesheet" href="./css/ShuBiao.css"> -->

  <!-- <link rel="stylesheet" href="./css/page_nav.css"> -->
  <!-- <link rel="stylesheet" href="./code/css/bootstrap.css" />
  <link rel="stylesheet" href="./code/css/bootstrap-icons.css" /> -->

  <!-- <script src="./code/js/bootstrap.bundle.js"></script> -->

</head>

<body>

  <!-- //顶部状态栏 -->
  <div class="top_conl">
    <div class="login-container-div">
      <div class="login_img_div">
        <img class="login_img" id="login_img" src="" alt="">
      </div>
      <div id="login-container">登录</div>
      <div class="qx_login" id="qx_login" onclick="qx_login()">
        <u>退出</u>

      </div>
    </div>

    <!-- 鼠标样式更改 -->
    <!-- <div class="pointer">
      <img src="./img/喜欢.png" alt="">

    </div> -->
    <!-- 鼠标样式js更改 -->
    <!-- <script src="./js/ShuBiao.js"></script> -->


  </div>
  <!-- 外壳 -->
  <div class="div1">

    <!-- 轮播图div -->
    <div class="container" id="container">

      <img src="./img/雪山一粟_1.jpg" class="active">
      <img src="./img/山水一色_2.jpg">
      <img src="./img/天水一色_3.jpg">
      <img src="./img/山间一屋_4.jpg">
      <img src="./img/春景一色_5.jpg">
      <img src="./img/沙漠一春_6.jpg">
      <!-- <img src="https://app.spline.design/file/aecc8b8c-e755-4fe0-b289-0cf35333a8b9" alt=""> -->
      <button id="left-btn"></button>
      <button id="right-btn"></button>

    </div>


    <!-- 距离 -->
    <div class="jl">

    </div>

    <!-- //参考值图 -->
    <div class="kz_gn_div">
      <div class="tuoz_title">拓展工具</div>
      <!-- 痕迹 -->
      <div class="fenLei_div">
        <!-- 分类名 -->
        <div class="fl_title">
          痕迹
        </div>
        <!-- 细化功能 -->
        <div class="kz_gn_xh">
          <li class="kz_gn wai_div">
            <a target="_blank" href="./henji.html">速度公式</a>
            <div class="zm_led_bg"></div>
          </li>
          <li class="kz_gn wai_div">
            <a target="_blank" href="./roadSurCoeChart.html">路面附着系数参考表</a>
            <div class="zm_led_bg"></div>
          </li>

        </div>

      </div>

      <!-- //==文书 -->
      <div class="fenLei_div">
        <div class="fl_title">
          文书
        </div>
        <div class="kz_gn_xh">
          <li class="kz_gn wai_div">
            <a target="_blank" href="./total_cost.html">总费用</a>
            <div class="zm_led_bg"></div>

          </li>
          <li class="kz_gn wai_div">
            <a target="_blank" href="./平均值计算.html">平均值</a>
            <div class="zm_led_bg"></div>
          </li>
          <li class="kz_gn wai_div">
            <a target="_blank" href="./WorkDays.html">工作日</a>
            <div class="zm_led_bg"></div>

        </div>

      </div>
      <!-- //==其他 -->
      <div class="fenLei_div">
        <div class="fl_title">
          其他
        </div>
        <div class="kz_gn_xh">
          <li class="kz_gn wai_div">
            <a target="_blank" href="./MD5_.html">MD5</a>
            <div class="zm_led_bg"></div>
          </li>
          <li class="kz_gn wai_div">
            <a target="_blank" href="./Hex_256.html">哈希-256</a>
            <div class="zm_led_bg"></div>
          </li>




          <!-- <li class="kz_gn wai_div">
            <a target="_blank" href="../../../win12-main/desktop.html">win12网页体验版</a>
            <div class="zm_led_bg"></div>
          </li> -->
        </div>


      </div>

    </div>



    <footer class="footer">
      <!-- 协调比例 -->
      <div class="foo_xt">
        <div class="db_p">网站介绍：</div>
        <div class="db_p">联系方式：</div>
        <div class="db_p">邮箱：</div>
        <div class="db_p">电话：</div>
        <!-- [邮箱] 电话：[电话] -->
        <div class="db_p">
          官网：
          <!-- <a id="xzInt" href="http://www.xzjdzx.com/" target="_blank" style="color: #999; ">西正官网</a> -->
        </div>
        <div class="db_p">维护：</div>
      </div>


    </footer>

    <!-- 西正官网  http://www.xzjdzx.com/ -->
    <!-- //代码提供者 -->
    <!-- <script src="./public/js/SUOME.js"></script> -->

  </div>

  <!-- <script src="./js/interval.js"></script> -->
  <script>
    var images = document.querySelectorAll('#container img');
    // 当前显示的图片索引
    var currentIndex = 0;
    var imageCount = images.length;
    // 切换图片
    function switchImage(direction) {
      // 每次切换图片后，记录当前激活的图片索引，用于下次切换图片时移除active类
      currentIndex = currentIndex % imageCount;
      // 每次激活图片，自动播放重新计时 
      clearInterval(interval);
      //再开启自动播放
      interval = setInterval(function () {
        switchImage(1);
      }, 5000);

      // 移除当前图片的active类 
      images[currentIndex].classList.remove('active');

      // 检查是否到达最后一张图片
      if (currentIndex + direction >= imageCount) {
        currentIndex = 0;
        // 检查是否到达第一张图片
      } else if (currentIndex + direction < 0) {
        currentIndex = images.length - 1;
      }
      // 如果没有到达边界，则按照方向切换图片
      else {
        currentIndex = (currentIndex + direction) % imageCount;
      }

      images[currentIndex].classList.add('active');
    }
    var leftBtn = document.getElementById('left-btn');
    var rightBtn = document.getElementById('right-btn');
    // 绑定按钮事件 
    leftBtn.addEventListener('click', function () {
      switchImage(-1);
    });
    rightBtn.addEventListener('click', function () {
      switchImage(1);
    });
    // 自动播放
    let interval = setInterval(function () {
      switchImage(1);
    }, 5000);


    // 测试和服务器通信
    // setInterval(function () {
    // let uphone = '123'
    // let xhr = new XMLHttpRequest()
    // let url = `login?uphone=${uphone}`
    // console.log("url=", url)
    // xhr.open('GET', url)
    // xhr.onload = function () {
    //   let result = xhr.responseText
    //   let NotData_Me = result.data
    //   console.log('result=', result)
    //    result = JSON.parse(result)
    //   if (result == '' || result == undefined || result.data > 8 || result.data < 0) {
    //      localStorage.setItem("NotData_Me", NotData_Me)
    //      Fh()
    //   }
    // }
    // xhr.send()
    // }, 1000 * 3)

  </script>

</body>

</html>